<template>
	<view class="">
		<!-- 使用自定义导航组件 -->
		<custom-navbar title="加盟选择" :showBack="true"></custom-navbar>
	</view>
  <view class="franchise-container">

    <view class="options-container">
      <!-- 咨询师入驻 -->
      <!-- <view class="option-item" @click="navigateToConsultant">
        <view class="icon-container">
          <view class="icon consultant-icon">
            <image src="/static/other/psychology.png" mode="aspectFit"></image>
          </view>
        </view>
        <view class="option-text">咨询师入驻</view>
        <view class="arrow">
			<image src="/static/pecenter/return.png" mode="widthFix"></image>
		</view>
      </view> -->

      <!-- 机构入驻 -->
      <view class="option-item" @click="navigateToInstitution">
        <view class="icon-container">
          <view class="icon institution-icon">
            <image src="/static/pecenter/yiyuanguanli.png" mode="aspectFit"></image>
          </view>
        </view>
        <view class="option-text">机构入驻</view>
        <view class="arrow">
			<image src="/static/pecenter/return.png" mode="widthFix"></image>
		</view>
      </view>

      <!-- 使用咨询室 -->
    <!--  <view class="option-item" @click="navigateToConsultRoom">
        <view class="icon-container">
          <view class="icon room-icon">
            <image src="/static/other/building.png" mode="aspectFit"></image>
          </view>
        </view>
        <view class="option-text">使用咨询室</view>
        <view class="arrow">
			<image src="/static/pecenter/return.png" mode="widthFix"></image>
		</view>
      </view> -->
    </view>
  </view>
</template>

<script>
	import customNavbar from '../../components/custom-navbar/custom-navbar.vue';
  export default {
    name: 'Franchise',
    methods: {

      // 跳转到咨询师入驻页面
      navigateToConsultant() {
        // 这里应该跳转到咨询师入驻页面，暂时用提示代替
        uni.showToast({
          title: '即将跳转到咨询师入驻页面',
          icon: 'none'
        })
      },

      // 跳转到机构入驻页面
      navigateToInstitution() {
        // 检查settlein.vue文件是否存在
        try {
          uni.navigateTo({
            url: '/pages/personal/insettled'
          })
        } catch (error) {
          // 如果文件不存在，显示提示
          uni.showToast({
            title: '机构入驻页面正在维护中',
            icon: 'none'
          })
          console.error('跳转失败:', error)
        }
      },

      // 跳转到使用咨询室页面
      navigateToConsultRoom() {
        // 这里应该跳转到使用咨询室页面，暂时用提示代替
        uni.showToast({
          title: '即将跳转到使用咨询室页面',
          icon: 'none'
        })
      }
    }
  }
</script>

<style scoped>
  .franchise-container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
	margin-top: 190rpx;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    background-color: #fff;
    padding: 0 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .back-btn {
    width: 36rpx;
    height: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .back-icon {
    font-size: 36rpx;
    color: #333;
  }

  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }

  .right-placeholder {
    width: 36rpx;
  }

  .options-container {
    padding: 40rpx 30rpx;
  }

  .option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 200rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 40rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  .option-item:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
  }

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon {
    width: 120rpx;
    height: 120rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ece9ff;
  }

  .icon image {
    width: 80rpx;
    height: 80rpx;
  }

  .option-text {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    color: #333;
    font-weight: 500;
  }

  .arrow {
   width: 35rpx;
   height: 35rpx;
  }
  .arrow image{
	  width: 35rpx;
	  height: 35rpx;
  }
</style>